<template>
    <van-nav-bar title="订单详情" left-arrow @click-left="onBack" />

    <div class="near-box">

        <div class="jd-qrdd-bigbox">
            <!--商品地址管理部分-->
            <!-- <div class="indent-details-box">
                <span class="indent-details-img1"></span>
                <span class="indent-details-text1"></span>
                <span class="indent-details-text2">物流信息：客户签收人：邮件收发 已签收 感谢使用圆通快递，期待再次为您服务！</span>
                <span class="indent-details-text3">2017-10-23 12:25:12</span>
            </div> -->
            <!--地址部分-->
            <div class="jd-qrdd-a1">
                <span class="qrdd-a1-t1">{{ state.info.address.consignee }}</span>
                <span class="qrdd-a1-t1">{{ state.info.address.mobile }}</span>
                <span class="qrdd-a1-t2" v-if="state.info.address.status == 1">默认</span>
                <div class="qrdd-a1-b1">
                    <span class="qrdd-a1-img1"></span>
                    <span class="qrdd-a1-t3">{{ state.info.address.region_text }} {{ state.info.address.address }}</span>
                </div>
                <span class="qrdd-a1-img2"></span>
            </div>
            <!--商品部分-->
            <div class="zjzz-buylist-goods1">
                <div class="zjzz-buylist-gtime">
                    <!-- <span class="zjzz-buylist-gtime1"><i class="indent-details-img2"></i>保洁官方旗舰店</span> -->
                    <span class="zjzz-buylist-gtime2">{{ state.info.order.status_text }}</span>
                </div>
                <div class="zjzz-buylist-det" v-for="item of state.info.product" :key="item.id">
                    <img :src="item.products.avatars_cdn[0]" />
                    <div class="zjzz-buylist-gdetail">
                        <span class="zjzz-buylist-gtit1">{{ item.products.name }}</span>
                        <span class="zjzz-buylist-gmoney">
                            <i class="zjzz-buylist-gm1">￥ {{ item.total }}</i>
                            <i class="zjzz-buylist-gm2">x{{ item.pronum }}</i>
                        </span>
                    </div>
                </div>
                <div class="zjzz-buylist-btn">
                    <a class="zjzz-buylist-btn3">申请售后</a>
                </div>
            </div>
            <!--商品金额部分-->
            <div class="indent-details-box2">
                <span class="indent-details-text4">应付总额</span>
                <span class="indent-details-text5">￥{{ state.info.order.amount }}</span>
            </div>
            <div class="indent-details-box2">
                <span class="indent-details-text4 tcolor-grey">商品总价</span>
                <span class="indent-details-text5 tcolor-black">￥{{ state.info.order.amount }}</span>
            </div>
            <!-- <div class="indent-details-box2">
                <span class="indent-details-text4 tcolor-grey">运费</span>
                <span class="indent-details-text5 tcolor-black">￥0.00</span>
            </div>
            <div class="indent-details-box2">
                <span class="indent-details-text4 tcolor-grey">税费</span>
                <span class="indent-details-text5 tcolor-black">￥0.00</span>
            </div>
            <div class="indent-details-box2">
                <span class="indent-details-text4 tcolor-grey">发票信息</span>
                <span class="indent-details-text5 tcolor-black">不需要发票</span>
            </div> -->
            <!--订单编号部分-->
            <div class="indent-details-box3">
                <p>订单编号:{{ state.info.order.code }}</p>
                <!-- <p>支付方式:支付宝</p>
                <p>支付交易单号:201711024866544846144</p> -->
                <p>下单时间:{{ state.info.order.createtime_text }}</p>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive,onMounted } from 'vue'
import apiList from '@/api'
import { useRouter, useRoute } from 'vue-router'
import { showNotify } from 'vant'

const route = useRoute()
const router = useRouter()

const state = reactive({
    orderid: route.query.orderid,
    info: {
        order: {},
        address: {},
        product: []
    }
})

onMounted(()=>{
    getOrderInfo()
})

function onBack() {
    router.go(-1)
}
async function getOrderInfo() {
    let data = {
        orderid: state.orderid
    }

    let result = await apiList.OrderInfo(data)

    if (result.code === 0) {
        showNotify({
            type: 'warning',
            message: result.msg,
            onClose: () => {
                router.go(-1)
            }
        })

        return false
    }

    state.info = result.data
}
</script>

<style>
@import url('/assets/css/indent-details.css');
</style>